<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="博客,技术,PHP,Mysql,Html,Css,Ajax,服务器,Js,数据库,网站,微信公众号,小程序" />
    <meta name="description" content="Alinejun - 个人技术博客，专注码农的世界" />
    <title>Alinejun - 个人技术博客</title>
    <link rel="icon" href="__IMG__/favicon.ico">
    <link href="__STATIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="__STATIC__/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/head.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/base.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/index.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/user.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/iconfont.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="__LIB__/dropzone/dropzone.css" />
    <style>
        .dropzone{width:160px;padding:0px;border:1px solid #e6e6e6;}
        .dropzone .dz-message{margin:0px;line-height:160px;}
        .layui-input-inline p{padding: 9px 15px;font-weight: 400;line-height: 20px;}
        .del_img{display: block;text-align: center;margin-top: 8px;color: red;cursor: pointer;}
        .del_img:hover{color: red;cursor: pointer;text-decoration: underline;}
        .label-list{display: none;width: 50%;height:500px;position: fixed;left: 0px;top: 0px;right: 0px;bottom: 0px;margin:auto auto;z-index: 999;background: #fff;border:1px solid #ddd;box-shadow: 5px 5px 5px #ccc}
        .label-list .layui-input-block{margin: 15px 30px}
        .label-list .layui-unselect{margin: 10px 10px;}
        .label-list .select-label{position: absolute;bottom: 20px;right: 20px;}
    </style>    
</head>
<body>
    <!-- head -->
    <div class="container-fluid" style="padding: 0px">
        <div class="header">
            <!-- header -->
            {:widget('Common/header')}
            <!-- /header -->

            <!-- category -->
            {:widget('Common/category')}
            <!-- /category -->
        </div>
    </div>
    <!-- head -->

	<!-- itemGrid for hot -->
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-md-3 box-left nav-pc">

                <!-- usermenu -->
                {:widget('Common/usermenu')}
                <!-- usermenu -->

            </div>
            <div class="col-sm-8 col-md-9 box-right">
                <div class="ruser usertitle">
                    <div class="head">
                        <h3>
                            <?php if(is_mobile_request()){?>
                                <a href="{:url('index/user/wap')}" title="个人中心">个人中心</a> -> 个人资料
                            <?php }else{?>
                                <a href="{:url('index/user/index')}" title="个人中心">个人中心</a> -> 个人资料
                            <?php }?>
                        </h3>
                    </div>                    
                    <form class="form-horizontal" id="user-form">
                        <div class="form-group">
                            <label class="col-md-3 col-sm-4 control-label">头像</label>
                            <div class="col-md-9 col-sm-8">
                                <div id="mydropzone" class="dropzone">
                                    {if $info['headpic'] != ''}
                                    <div class="dz-preview dz-file-preview">
                                        <div class="dz-image">
                                            <img data-dz-thumbnail src="__ROOT__{$info.headpic}" width="100%" />
                                        </div>
                                    </div>
                                    {/if}                                 
                                </div>
                                <input type="hidden" name="headpic" value="{$info.headpic}">                          
                            </div>
                        </div>                        
                        <div class="form-group">
                            <label for="nickname" class="col-md-3 col-sm-4 control-label">昵称</label>
                            <div class="col-md-9 col-sm-8">
                                <input type="text" name="nickname" class="form-control" id="nickname" value="{$info.nickname}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="username" class="col-md-3 col-sm-4 control-label">用户名</label>
                            <div class="col-md-9 col-sm-8">
                                <input type="text" name="username" class="form-control" id="username" value="{$info.username}" readonly="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-md-3 col-sm-4 control-label">修改密码</label>
                            <div class="col-md-9 col-sm-8">
                                <input type="password" name="password" class="form-control" id="password" placeholder="非更改密码请勿填">
                            </div>
                        </div>                        
                        <div class="form-group">
                            <label for="" class="col-md-3 col-sm-4 control-label">性别</label>
                            <div class="col-md-9 col-sm-8">
                                <label class="radio-inline">
                                    <input type="radio" name="sex" {if $info['sex'] == 1}checked{/if} value="1"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="sex" {if $info['sex'] == 2}checked{/if} value="2"> 女
                                </label>                                
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="job" class="col-md-3 col-sm-4 control-label">工作</label>
                            <div class="col-md-9 col-sm-8">
                                <input type="text" name="job" class="form-control" id="job" value="{$info.job}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-3 col-sm-4 control-label">兴趣爱好</label>
                            <div class="col-md-9 col-sm-8">
                                <textarea class="form-control" name="interest" rows="3">{$info.interest}</textarea>
                            </div>
                        </div>

                        <div class="sub">
                            <input type="hidden" name="user_id" value="{$info.user_id}">
                            <button type="button" class="btn btn-primary">Submit</button>
                        </div>                                                                  
                    </form>
                </div>              
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

    <!-- footer -->
    {:widget('Common/footer')}
    <!-- /footer -->

    <script type="text/javascript" src="__JS__/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="__JS__/jquery.ripples.js"></script>
    <script type="text/javascript" src="__JS__/base.js"></script>
    <script type="text/javascript" src="__LIB__/dropzone/dropzone.js"></script>
    <script type="text/javascript" src="__STATIC__/layer/layer.js"></script>

    <script>

        $(document).ready(function(){

            // 提交数据
            $(".sub button").click(function(){
                var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.2});
                // 序列化表单数据
                var form_data = $("#user-form").serialize();
                $.ajax({
                    type: "POST",
                    url:"{:url('index/user/edit')}",
                    data:form_data,
                    dataType:'json',
                    success: function(data){
                        top.layer.close(index);
                        if(data.status == -1){
                            layer.alert(data.msg, {icon: 2});
                        }else{
                            layer.msg(data.msg, {icon: 1});
                        }
                    }
                })
            })


            // upload img
            Dropzone.options.mydropzone = {
                url: "/index/index/uploadfile?type=headpic",
                maxFilesize: 2,
                maxFiles: 1,
                paramName:"image",
                acceptedFiles: "image/*",
                addRemoveLinks:true,
                dictRemoveFile:"删除文件",
                dictDefaultMessage:"点击上传",
                dictFallbackMessage:"抱歉，您的浏览器暂不支持图片上传功能",
                init:function(){
                    this.on("success",function(file, data){
                        console.log(data);
                        if (data.status == -1) {
                            layer.alert(data.msg);
                        }else{
                            $("div.dz-preview.dz-file-preview").remove();
                            // 绑定文件路径
                            file._removeLink.setAttribute("data-url",data);
                            $("input[name='headpic']").val(data);
                            layer.msg("上传成功");
                        }
                    });
                    this.on("error",function(file, errorMessage){
                        if (file.status == "error") {
                            file.previewElement.remove();
                            layer.alert(errorMessage);
                        }
                    });
                    this.on("removedfile",function(file){
                        var url = file._removeLink.getAttribute("data-url");
                    });

                    if ($("div.dz-preview").length > 0) {
                        $("div.dz-default.dz-message").hide();
                    }                              
                }
            }; 



        })
       
      
    </script> 

</body>
</html>